<template>
    <view class="nodataview">
        <image
            class="nodata_img"
            :src="`/static/pic/${type}.png`"
            mode="widthFix"
        />
        <view class="nadata_text">{{ !name ? PageList[type] : name }}</view>
        <wd-button
            plain
            v-if="type === 'pic_nomesh'"
            @click="CallBackRefreshWork"
        >
            刷新网络
        </wd-button>
    </view>
</template>

<script setup lang="ts">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = withDefaults(
    defineProps<{
        /*
		pic_404 显示错误，出现404
		pic_nodata 暂无数据
		pic_nocollect 暂无收藏
		pic_nomesh 网络链接断开，请检查网络哦~
	*/
        type?: 'pic_404' | 'pic_nodata' | 'pic_nocollect' | 'pic_nomesh' //特定类型和中文显示
        name?: string
    }>(),
    {
        type: 'pic_nomesh',
        name: undefined,
    },
)
//刷新网络 回调事件
const emit = defineEmits(['CallBackRefreshWork'])
const CallBackRefreshWork = () => {
    emit('CallBackRefreshWork')
}
const PageList = {
    pic_404: '显示错误，出现404',
    pic_nodata: '暂无数据',
    pic_nocollect: '暂无收藏',
    pic_nomesh: '网络链接断开，请检查网络哦~',
}
</script>

<style lang="scss" scoped>
.nodataview {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .nodata_img {
        width: 334rpx;
    }

    .nadata_text {
        margin-top: 70rpx;
        margin-bottom: 30rpx;
        color: $hy-color-font-2;
        text-align: center;
        font-size: 28rpx;
        font-weight: 400;
    }
}
</style>
